# Component: Profile Dropdown

Secure user management menu with right-aligned layout

Navigation Block

### BEM Anatomy

| Type      | Class Name              | Description                                                                                            |
| --------- | ----------------------- | ------------------------------------------------------------------------------------------------------ |
| ==Block== | `.as-profile-dropdown`  | The core wrapper (`<li>`). Applied to the navigation item list.                                        |
| Element   | `__toggle`              | The primary "Profile" button that triggers the menu. Styled with a white icon color.                   |
| Element   | `__menu`                | The `dropdown-menu` container. Utilizes `dropdown-menu-end` for right-alignment.                       |
| Element   | `__menu-item`           | Individual list items within the dropdown. Modifiers manage spacing and dividers.                      |
| Modifier  | `__menu-item--username` | Specific styling for the non-interactive header showing the current user's name/email.                 |
| Modifier  | `__menu-item--divider`  | Applies a horizontal line to separate identity info from account actions or logout.                    |
| Modifier  | `__menu-item--account`  | Styling for general account settings and profile edit links.                                           |
| Modifier  | `__menu-item--logout`   | The container specifically for the exit action; often features additional top-padding or a top-border. |
| Element   | `__button`              | Base class for links or buttons within the menu items.                                                 |
| Modifier  | `__button--logout`      | Applies a high-contrast `var(--bs-danger)` color to signal the exit action.                            |

### Behavioral Logic

The component supports dual logout modes: a standard Blazor `@onclick` event or a formal `ButtonType.Submit` based on the `IsLogoutSubmit` boolean. It uses standardized spacing for icons to ensure a clean vertical line of text within the menu.

##### Generated HTML (Menu Structure)

```html
<li class="as-profile-dropdown nav-item dropdown">
    <a class="as-profile-dropdown__toggle nav-link dropdown-toggle">
        <i class="fa-solid fa-user"></i> Profile
    </a>
    <ul class="as-profile-dropdown__menu dropdown-menu dropdown-menu-end">
        <li class="as-profile-dropdown__menu-item--username">
            <h6 class="dropdown-header">John Doe</h6>
        </li>
        <li class="as-profile-dropdown__menu-item--divider">
            <hr class="dropdown-divider">
        </li>
        <li class="as-profile-dropdown__menu-item--logout">
            <button class="as-profile-dropdown__button--logout dropdown-item">
                <i class="fa-solid fa-right-from-bracket"></i> Logout
            </button>
        </li>
    </ul>
</li>
```

##### SCSS

```scss
.as-profile-dropdown {
  white-space: nowrap; // Prevents username wrapping

  &__toggle {
    color: var(--bs-white); // Header contrast
  }

  &__menu-item i {
    // Consistent alignment for all icons
    margin-right: 0.25rem;
  }

  &__button--logout {
    color: var(--bs-danger); // Destruction semantic
  }
}
```
